// JavaScript Document
function click_newselectors()
{
	var elements = document.getElementsByClassName('pre');
	var id_textarea_1 = document.getElementById('id_textarea_1');	
	id_textarea_1.innerHTML = "";
	for(var i = 0; i < elements.length; i++)
	{
		id_textarea_1.innerHTML += elements[i].innerHTML + '\n';
	}      
}
function Save_Storage_Local()
{
	var session_value = document.getElementById('session').value;
	sessionStorage.setItem('value', session_value);
	sessionStorage.setItem('timestamp', (new Date()).getTime());
	
	var local_value = document.getElementById('local').value;
	localStorage.setItem('value', local_value);
	localStorage.setItem('timestamp', (new Date()).getTime());
}

// type: loại session or local
function getStorage(type) {
  var storage = window[type + 'Storage'],
	delta = 0,
	li = document.createElement('li');

  if (!window[type + 'Storage']) return;

  if (storage.getItem('value')) {
	delta = ((new Date()).getTime() - (new Date()).setTime(storage.getItem('timestamp'))) / 1000;
	
	li.innerHTML = type + 'Storage: ' + storage.getItem('value') + ' (last updated: ' + delta + 's ago)';
  } else {
	li.innerHTML = type + 'Storage rỗng';
  }

  document.querySelector('#previous').appendChild(li);
}

function Clear_Storage_Local()
{
	sessionStorage.clear();
	localStorage.clear();
	document.querySelector('#previous').innerHTML = '';
	getStorage('local');
	getStorage('session');
}

function start_canvas()
{
	buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
}

function start_worker()
{
	var worker = new Worker('worker.js');
	worker.addEventListener("message", function (event) {
		document.getElementById("status").textContent = event.data;
	}, false);
	worker.postMessage("Hello");
}
//worker.onmessage = updateResult;
//function updateResult(event)
//{
//	document.querySelector('#status').innerHTML = event.data;
//}
function buildSpinner(data) {			  
  var canvas = document.createElement('canvas');
  canvas.height = 100;
  canvas.width = 300;
  document.querySelector('#article_canvas').appendChild(canvas);
  var ctx = canvas.getContext("2d"),
	i = 0, degrees = data.degrees, loops = 0, degreesList = [];
	
  for (i = 0; i < degrees; i++) {
	degreesList.push(i);
  }
  
  // reset
  i = 0;
  
  // so I can kill it later
  window.canvasTimer = setInterval(draw, 1000/degrees);  

  function reset() {
	ctx.clearRect(0,0,100,100); // clear canvas
	
	var left = degreesList.slice(0, 1);
	var right = degreesList.slice(1, degreesList.length);
	degreesList = right.concat(left);
  }
  
  function draw() {
	var c, s, e;

	var d = 0;

	if (i == 0) {
	  reset();
	}

	ctx.save();

	d = degreesList[i];
	c = Math.floor(255/degrees*i);
	ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
	ctx.lineWidth = data.size;
	ctx.beginPath();
	s = Math.floor(360/degrees*(d));
	e = Math.floor(360/degrees*(d+1)) - 1;

	ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
	ctx.stroke();

	ctx.restore();

	i++;
	if (i >= degrees) {
	  i = 0;
	}
  }  
}

function request_permission()
{
	window.webkitNotifications.requestPermission();
}

function readTweets()
{
	var username = document.getElementById('username').value;
	if (username == 'username') {
		alert('Chưa nhập username');
		return;
	}
	var script = document.createElement("script");
	script.src = 'http://twitter.com/statuses/user_timeline/'+ username+'.json?count=1&callback=fetchTweets';
	document.body.appendChild(script);
}

function fetchTweets(data) {
	var tweet;
	var i = data.length;
	while (i--) {
		tweet = data[i];
		if (window.webkitNotifications.checkPermission() == 0) {
		// note the show()
			window.webkitNotifications.createNotification(tweet.user.profile_image_url, tweet.user.name, tweet.text).show();
		} else {
			// Note that we can't call requestPermission from here as we are in the callback function and not triggered just on user action
			alert('Bạn phải click vào "Set notification permissions for this page" trước khi có thể nhận tin từ Twitter.');
			return;
		}
	}
}

function PlayVideo()
{
	videoClip.play();
	playButton.disabled = true;
	pauseButton.disabled = false;
}

function PauseVideo()
{
	videoClip.pause();
	playButton.disabled = false;
	pauseButton.disabled = true;
}

function MuteUnmute()
{
	document.getElementById('mute').value = videoClip.muted ? 'Mute' : 'Unmute';
	videoClip.muted = videoClip.muted ? false : true;
}

function OnFinished()
{
	playButton.disabled = false;
	pauseButton.disabled = true;
}

function PlayAudio() 
{
	audioClip.play();
	audioPlayButton.disabled = true;
	audioPauseButton.disabled = false;
}

function PauseAudio() 
{
	audioClip.pause();
	audioPlayButton.disabled = false;
	audioPauseButton.disabled = true;
}

function MuteUnmuteAudio() 
{
	document.getElementById('audio-mute').value = audioClip.muted ? 'Mute' : 'Unmute';
	audioClip.muted = audioClip.muted ? false : true;
}

function OnAudioFinished() 
{
	audioPlayButton.disabled = false;
	audioPauseButton.disabled = true;
}

function changeColumn(event) {
	var val = event.target.value;
	document.getElementById('columns-no-value').textContent = val;
	var el = document.getElementById('columns-no-example');
	el.style.webkitColumnCount = val;
	el.style.MozColumnCount = val;
} 

function changeShadow() {
	var el = document.getElementById('shadow-example');
	var textXVal = document.getElementById('shadows-text-x').value;
	var textYVal = document.getElementById('shadows-text-y').value;
	var textSizeVal = document.getElementById('shadows-text-size').value;
	
	document.getElementById('shadows-text-x-value').textContent = textXVal;
	document.getElementById('shadows-text-y-value').textContent = textYVal;
	document.getElementById('shadows-text-size-value').textContent = textSizeVal;
	
	var boxXVal = document.getElementById('shadows-box-x').value;
	var boxYVal = document.getElementById('shadows-box-y').value;
	var boxSizeVal = document.getElementById('shadows-box-size').value;
	
	document.getElementById('shadows-box-x-value').textContent = boxXVal;
	document.getElementById('shadows-box-y-value').textContent = boxYVal;
	document.getElementById('shadows-box-size-value').textContent = boxSizeVal;
	
	el.style.textShadow = 'rgba(64, 64, 64, 0.5) ' + textXVal + 'px ' + textYVal + 'px ' + textSizeVal + 'px';
	el.style.webkitBoxShadow = 'rgba(0, 0, 128, 0.25) ' + boxXVal + 'px ' + boxYVal + 'px ' + boxSizeVal + 'px';
	el.style.MozBoxShadow = 'rgba(0, 0, 128, 0.25) ' + boxXVal + 'px ' + boxYVal + 'px ' + boxSizeVal + 'px';
}

function handleCorner() {
	var rounded_corners_example = document.getElementById('rounded-corners-example');
	var borderVal = document.getElementById('rounded-border').value;
	rounded_corners_example.style.borderRadius = borderVal + 'px';
	rounded_corners_example.style.mozBorderRadius = borderVal + 'px';
	//var doraemon = document.querySelector('#doraemon iframe').contentWindow.document;
//	var elements = ["face", "lefteye", "righteye", "base_white", "mouth", "nose", "leftblackeye", "rightblackeye"];
//	for (var i = 0; i < elements.length; i++) {
//		var element = elements[i] + '-rounded-border';
//		var borderVal = document.getElementById(element).value;
//		document.getElementById(element + '-value').textContent = borderVal;
//		var faceEl = doraemon.getElementById(elements[i]);
//		faceEl.style.borderRadius = borderVal + 'px';
//		faceEl.style.mozBorderRadius = borderVal + 'px';
//	}
}
function changeTextStroke()
{
	var width = (document.getElementById('text-stroke').value * 0.25).toFixed(2);
	document.getElementById('text-stroke-example').style.webkitTextStrokeWidth = width + 'px';
	document.getElementById('text-stroke-value').textContent = width;
}
function changeOpacity() 
{
	var textOpacity = (document.getElementById('opacity-color').value / 100).toFixed(2);
	var backgroundOpacity = (document.getElementById('opacity-background').value / 100).toFixed(2);

	var el = document.getElementById('opacity-example');

	el.style.color = 'rgba(255, 232, 0, ' + textOpacity + ')';
	el.style.background = 'rgba(114, 9, 171, ' + backgroundOpacity + ')';

	document.getElementById('opacity-color-value').textContent = textOpacity;
	document.getElementById('opacity-background-value').textContent = backgroundOpacity;
}
function changeWeb20() 
{
	var el = document.getElementById('web20-google');
	
	var reflectVal = (document.getElementById('web20-reflect').value / 100).toFixed(2);
	document.getElementById('web20-reflect-value').textContent = reflectVal;
	
	var offsetVal = document.getElementById('web20-offset').value;
	document.getElementById('web20-offset-value').textContent = offsetVal;
	
	el.style.webkitBoxReflect = 'below ' + offsetVal + 'px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, ' + reflectVal + ')))';
}

function changeGradients()
{
	var size = document.getElementById('gradients-radial').value;

	document.getElementById('gradients-radial-example').style.background = '-webkit-gradient(radial, 380 50, 0, 380 50, ' + size + ', from(red), to(#000))';

	document.getElementById('gradients-radial-value').textContent = size;
}

function transitionLeft(no) 
{
	document.getElementById('transitions-box-' + no).className = 'left';
}
function transitionRight(no)
{
	document.getElementById('transitions-box-' + no).className = 'right';
}